﻿@using MC.RideEvent.Mvc.Models.ViewModel
@model VehiculeModelViewModel

<script type="text/javascript">
    $(document).ready(function () {
        var brands = $("#VehiculeBrandId").kendoDropDownList({
            //optionLabel: "Sélectionnez une marque...",
            dataTextField: "Title",
            dataValueField: "Id",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        async: false,
                        dataType: "json",
                        url: "@Url.Action("Brands", "VehiculeApi")",
                    }
                }
            },
            change: onChangeBrand,
        }).data("kendoDropDownList");

        $("#VehiculeModelId").kendoDropDownList({
            autoBind: false,
            cascadeFrom: "VehiculeBrandId",
            cascadeFromField: "VehiculeBrandId",
            //optionLabel: "Sélectionnez un modèle...",
            dataTextField: "Title",
            dataValueField: "Id",
            dataSource: {
                transport: {
                    read: {
                        async:false,
                        dataType: "json",
                        url: "@Url.Action("Models", "VehiculeApi")",
                        data: function () {
                            return { brandId: $("#VehiculeBrandId").val() };
                        }
                    }
                }
            },
        }).data('kendoDropDownList');
    });
    
    function onChangeBrand(e) {
        var gridModel = $("#VehiculeModelId").data("kendoDropDownList");
        gridModel.dataSource.read();
    }
    
    function onError(args) {
        if (args.errors) {
            var ddl = $("#VehiculeModelId").data("kendoDropDownLists");
            console.log(args);
            //ddl.one("dataBinding", function (e) {
            //    e.preventDefault();   // cancel grid rebind if error occurs                             

            //    for (var error in args.errors) {
            //        showMessage(grid.editable.element, error, args.errors[error].errors);
            //    }
            //});
        }
    }
</script>